<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('请假单列表')" />
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">

        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                      <!--  <span class="label label-success pull-right">月</span>-->
                        <h5>待办任务数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${flowGeneralSituation.todoTaskNum}"></h1>
                       <div class="stat-percent font-bold text-success">
                           <i class="fa fa-level-down"></i>
                           <a onclick="toDoMyTask()">去完成</a>
                       </div>
                      <!--<small>总收入</small>-->
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                       <!-- <span class="label label-info pull-right">全年</span>-->
                        <h5>已办任务数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${flowGeneralSituation.doneTaskNum}"></h1>
                        <div class="stat-percent font-bold text-info">
                            <i class="fa fa-level-up"></i>
                            <a onclick="toMyTakePartInProcess()">详情</a>
                        </div>
                        <!--<small>新订单</small>-->
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                       <!-- <span class="label label-primary pull-right">今天</span>-->
                        <h5>发起流程数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${flowGeneralSituation.myStartProcessInstanceNum}"></h1>
                        <div class="stat-percent font-bold text-navy">
                            <i class="fa fa-level-up"></i>
                        </div>
                      <!--  <small>新访客</small>-->
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <!--<span class="label label-danger pull-right">最近一个月</span>-->
                        <h5>任务超时数（3天）</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${flowGeneralSituation.threeTodoTaskNum}"></h1>
                        <div class="stat-percent font-bold text-danger">
                            <i class="fa fa-level-down"></i>
                        </div>
                        <!-- <small>12月</small>-->
                    </div>
                </div>
            </div>
        </div>

        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>我的待办</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                时间
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                          <div class="col-sm-12 search-collapse">
                                <form id="formId">
                                    <div class="select-list">
                                        <ul>
                                            <li>
                                                <label>流程名称：</label>
                                                <input type="text" name="processDefinitionName"/>
                                            </li>
                                            <li>
                                                <label>单号：</label>
                                                <input type="text" name="businessKey"/>
                                            </li>
                                            <li>
                                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                            </li>
                                        </ul>
                                    </div>
                                </form>
                            </div>
                            <div class="col-sm-12 select-table table-striped">
                                <table id="bootstrap-table"></table>
                            </div>
                    </div>
                </div>
            </div>

         </div>
      </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    
    <th:block th:include="include :: sparkline-js" />
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <script th:inline="javascript">
        var todoList = [[${@permission.hasPermi('flow:get:todoList')}]];
        var prefixFlow = ctx + "flow";
        $(function() {
            var options = {
                id: "bootstrap-table",
                formId:"formId",
                url: prefixFlow + "/findTasksByUserId",
                striped: true,
                showToggle: false,
                loadingFontSize:20,
                showRefresh: false,                   // 是否显示刷新按钮
                showColumns: false,                   // 是否显示隐藏某列下拉框
                showToggle: false,
                showSearch: false,                     // 是否显示检索信息
                modalName: "我的待办",
                columns: [{
                    title: '序号',
                    formatter: function (value, row, index) {
                        return index+1;
                    }
                },
                    {
                        field: 'taskId',
                        title: 'taskId',
                        visible: false
                    },
                    {
                        field: 'processDefinitionName',
                        title: '流程名称'
                    },
                    {
                        field: 'businessKey',
                        title: '单号'

                    },

                    {
                        field: 'taskName',
                        title: '审批节点'

                    },
                    {
                        field: 'startUserName',
                        title: '流程发起人'
                    },
                    {
                        field: 'startTime',
                        title: '流程发起时间'
                    },
                    {
                        field: 'createDate',
                        title: '任务创建时间'
                    },

                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs ' + todoList + '" href="javascript:void(0)" onclick="cancelTask(\''+row.taskId+'\')"><i class="fa fa-edit"></i>处理</a> ');
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });

        function cancelTask(taskId) {
            console.log(JSON.stringify(taskId));
            var preViewUrl=prefixFlow+'/toFinishTask?taskId='+taskId;
            $.modal.openTab("审批", preViewUrl);
        }

        function toDoMyTask() {
            var preViewUrl=prefixFlow+'/toDoMyTask?';
            $.modal.openTab("我的待办任务", preViewUrl);
        }

        function toMyTakePartInProcess() {
            var preViewUrl=prefixFlow+'/toMyTakePartInProcess?';
            $.modal.openTab("我的已办任务", preViewUrl);
        }
    </script>
</body>
</html>
